Methods of Website Generation

ABSTRACT

Methods of generating websites using any combination of remotely and locally stored content are contemplated. Content is procured by a user on a client computer, and a request to add that content to a source folder is sent to a server. The server adds the content to the source folder, where it is made available for website creation. When a client requests creation of a website using the contents of a source folder, the server then generates that website. In some embodiments, the website can be generated according to a user-selected theme or a default theme.

This application is a continuation-in-part of and claims priority toU.S. patent application Ser. No. 16/118,289 filed Aug. 30, 2018.

FIELD OF THE INVENTION

The field of the invention is website generation technologies.

BACKGROUND

The background description includes information that may be useful inunderstanding the present invention. It is not an admission that any ofthe information provided in this application is prior art or relevant tothe presently claimed invention, or that any publication specifically orimplicitly referenced is prior art.

Sharing content is an integral part of using the Internet, and the wayin which Internet users share content is constantly evolving.Oftentimes, people share single items of content directly with oneanother, and that is fine for things like news articles, pictures,podcasts, etc. But in many instances, people want to be able to sharemore than one item of content with many people at once. One of the bestways to do that is to make that content publicly available all in oneplace by building a website.

But building a website is not a trivial endeavor. Even when using aservice designed to make building a website simple, users are requiredto do the labor of building each page on a site according to a theme.The content that goes onto a website must be manually entered onto thesite according to the restrictions of that theme, which requires a userto do quite a lot more work than is warranted for the simple desire ofsharing content.

Thus, developments in content sharing have failed to appreciateadvancements in website building technology that facilitate simple andquick creation of websites for sharing all kinds of content.

These and all other extrinsic materials discussed in this applicationare incorporated by reference in their entirety. Where a definition oruse of a term in an incorporated reference is inconsistent or contraryto the definition of that term provided in this application, thedefinition of that term provided in this application applies and thedefinition of that term in the reference does not apply.

Thus, there is still a need in the art for improved website generatingtechnologies.

SUMMARY OF THE INVENTION

The present invention provides systems and methods of website generationusing locally and remotely stored content. One aspect of the inventivesubject matter contemplates a method of generating a website, where themethod includes the steps of: receiving, from a client, a request to addan item to a source folder, the request including an upload fileattribute having a filename and a content type where the upload fileattribute is associated with the item, and a save-to-folder identifierassociated with the source folder; sending, to the client, a response tothe request, the response including a source folder identifier and itemattributes that include an item type and a URL; receiving, from theclient, a website creation request, the website creation requestincluding the source folder identifier; generating the website and awebsite URL, wherein the website is accessible by the website URL andthe website comprises the item in the source folder; and sending, to theclient, a website creation response, the website creation responsecomprising the website URL. In some embodiments, the item attributes caninclude a MIME type.

In some embodiments, the request to add an item to a source folder alsoincludes one, or any combination of: an annotation attribute associatedwith the item; a title attribute comprising a title of the item; a titleassignment attribute; an annotation assignment attribute; an imageassignment attribute; an add-to-folder type; a URL associated with theitem; and a save method attribute.

In some embodiments, the save-to-folder identifier can include a tokenthat is associated with the source folder. In the same or otherembodiments, the save-to-folder identifier is the same as the sourcefolder identifier.

It is contemplated that the response to the request to add an item to asource folder can additionally include one, or any combination of: acompletion status indicator; a created-at indicator; adata-storage-usage indicator; a description; image attributes; a title;and a name.

In some embodiments, the website creation request further comprises one,or any combination of: a name; a subtitle; a description; an image URL;and a theme. The response to the website creation request canadditionally include one, or any combination of: author attributescomprising an author name and an author avatar; an author identifier; ananalytics ID; a created-at attribute; a data storage usage attribute; adescription; a website image; a website name; the source folderidentifier; and a visual completion status.

Another aspect of the inventive subject matter contemplates a method ofgenerating a website that includes the steps of: receiving, from aclient, a set of user-selected items, the set of user-selected itemsincluding at least a first website address and a second website address;adding the set of user-selected items to a source folder having anassociated source folder identifier; receiving, from the client, arequest to create a website, the request comprising the source folderidentifier; generating item representatives, each of the itemrepresentatives comprising at least one of a text block and an imagecorresponding to one of the set of user-selected items; generating thewebsite using the item representatives; and sending, to the client, aURL corresponding to the website.

In some embodiments, the request to create a website can also include auser-selected theme, where the website is generated at least in partaccording to the user-selected theme. In the same or other embodiments,the source folder identifier comprises a source folder token, and thesource folder token can be, or include, a UUID.

Another aspect of the inventive subject matter contemplates a method ofgenerating a website that includes the steps of: receiving, from aclient, a set of user-selected items, the set of user-selected itemscomprising at least a first website address and a second websiteaddress; adding the set of user-selected items to a source folder havingan associated source folder identifier, wherein the first websiteaddress is assigned to a first subfolder within the source folder, andwherein the second website address is assigned to a second subfolderwithin the source folder; receiving, from the client, a request tocreate a website, the request comprising the source folder identifier;generating item representatives for each item of the set ofuser-selected items, each of the item representatives comprising atleast one of a description and an image; and generating a website usingthe item representatives, where the generated website includes a firstsection based on the first subfolder and a second section based on thesecond subfolder.

In some embodiments, the request to create a website further comprises auser selected theme, and the website can then be generated according tothe user-selected theme. The source folder identifier can include asource folder token, and the source folder token can be, or include, aUUID.

Various objects, features, aspects and advantages of the inventivesubject matter will become more apparent from the following detaileddescription of preferred embodiments, along with the accompanyingdrawing figures in which like numerals represent like components.

BRIEF DESCRIPTION OF THE DRAWING

FIG. 1 shows an example of a gallery section of a website.

FIG. 2 shows a variety of different image styles.

FIG. 3 shows a variety of different item slot configurations.

FIG. 4 shows an example of an item slot arrangement having a gap.

FIG. 5 shows another example of an item slot arrangement having a gap.

FIG. 6 shows another example of an item slot arrangement having a gap.

FIG. 7A is a flow chart of an embodiment of the inventive subjectmatter.

FIG. 7B shows request and response flow between a client and a serverfor the flow chart of FIG. 7A.

FIG. 8A is a flow chart of another embodiment of the inventive subjectmatter.

FIG. 8B shows request and response flow between a client and a serverfor the flow chart of FIG. 8A.

FIG. 9A is a flow chart of another embodiment of the inventive subjectmatter.

FIG. 9B shows request and response flow between a client and a serverfor the flow chart of FIG. 9A.

FIG. 10A is a flow chart of an embodiment of the inventive subjectmatter that incorporates gap reduction.

FIG. 10B shows request and response flow between a client and a serverfor the flow chart of FIG. 10A.

DETAILED DESCRIPTION

The following discussion provides example embodiments of the inventivesubject matter. Although each embodiment represents a single combinationof inventive elements, the inventive subject matter is considered toinclude all possible combinations of the disclosed elements. Thus, ifone embodiment comprises elements A, B, and C, and a second embodimentcomprises elements B and D, then the inventive subject matter is alsoconsidered to include other remaining combinations of A, B, C, or D,even if not explicitly disclosed.

As used in the description in this application and throughout the claimsthat follow, the meaning of “a,” “an,” and “the” includes pluralreference unless the context clearly dictates otherwise. Also, as usedin the description in this application, the meaning of “in” includes“in” and “on” unless the context clearly dictates otherwise.

Also, as used in this application, and unless the context dictatesotherwise, the term “coupled to” is intended to include both directcoupling (in which two elements that are coupled to each other contacteach other) and indirect coupling (in which at least one additionalelement is located between the two elements). Therefore, the terms“coupled to” and “coupled with” are used synonymously.

It should be noted that any language directed to a computer should beread to include any suitable combination of computing devices, includingservers, interfaces, systems, databases, agents, peers, engines,controllers, or other types of computing devices operating individuallyor collectively. One should appreciate the computing devices comprise aprocessor configured to execute software instructions stored on atangible, non-transitory computer readable storage medium (e.g., harddrive, solid state drive, RAM, flash, ROM, etc.). The softwareinstructions preferably configure the computing device to provide theroles, responsibilities, or other functionality as discussed below withrespect to the disclosed apparatus. In especially preferred embodiments,the various servers, systems, databases, or interfaces exchange datausing standardized protocols or algorithms, possibly based on HTTP,HTTPS, AES, public-private key exchanges, web service APIs, knownfinancial transaction protocols, or other electronic informationexchanging methods. Data exchanges preferably are conducted over apacket-switched network, the Internet, LAN, WAN, VPN, or other type ofpacket switched network. The following description includes informationthat may be useful in understanding the present invention. It is not anadmission that any of the information provided in this application isprior art or relevant to the presently claimed invention, or that anypublication specifically or implicitly referenced is prior art.

Methods of the inventive subject matter are directed to on-demandcreation of websites using user-selected content. Users frequently needto quickly put together easy-to-access websites using a variety ofcontent that is either remotely stored (e.g., content stored somewhereon the Internet, such as a website, web server, or cloud server(s)) orlocally stored (e.g., content that is stored on a user's computer, suchas a photograph or PDF document). Methods of the inventive subjectmatter facilitate creation of websites using any combination of locallyand remotely stored content.

Each attribute described in this application can include an array ofattributes of that kind. “Array” should be interpreted to mean any datastructure—either known or discovered in the future—that is capable ofstoring the data or information that an array is described as being ableto store. A linked list, for example, is included in this definition of“array.” All attributes in this application, unless otherwise stated,should be interpreted as comprising either a single attribute or anarray of attributes.

Many of the features and attributes discussed in this application can beapplied to or used in all embodiments of the inventive subject matterdescribed in this application, regardless of the embodiment where thatattribute is discussed. The same is true for all of the subject matterdescribed in this application unless explicitly stated otherwise.

Further, the steps of methods described in this application can becompleted in an order other than that in which they are described,unless specifically described as being executed in a particular order orunless a particular order of execution is necessary to properly carryout the method.

FIGS. 7A and 7B show an embodiment of the inventive subject matter. Inthe method shown in these figures, the execution of various stepsresults in a newly generated website that incorporates user-selectedcontent (e.g., remotely stored content, locally stored content, or somecombination thereof). Interactions in the method involve a client and aserver, where “client” refers to, for example, a computing device (e.g.,a computer, a laptop, a mobile device, or the like) that is controlledby a user, and “server” refers to a computing device intended to host,for example, a website or web service (e.g., a server, cloud server, orother networked computer configured as a host).

For a server to generate a website using user-selected content, firstthe user must select and store that content in a way that makes itlocally accessible to the server. In step 700, a server receives, from aclient, a request to add an item to a source folder. A source folder ismanaged by the server and can be hosted on the server as well. Thesource folder is an organizational tool used to group items together,where an “item” is either locally or remotely stored content. An itemcan be, for example, a photograph, a document (e.g., *.pdf, *.docx, orany other filetype), a website, an audio recording, or any other type ofcontent that can be remotely or locally stored. A user uses theircomputing device (e.g., where the user's computing device is the“client”) to create the source folder (and optionally, one or moresubfolders within the source folder), and also to select an item to addto the source folder. With the item identified, the client sends arequest to the server, where the request includes information sufficientto identify the item and it requests that the item be added to thesource folder.

Information sufficient to identify the item can include one, or anycombination of, the following attributes: an annotation attributeassociated with the item; a title attribute comprising a title of theitem; an add-to-folder type; an upload file attribute; a URL; a titleassignment attribute; an annotation assignment attribute; an imageassignment attribute; a save method attribute; a save-to-folderidentifier; and a browser attribute.

The add-to-folder type attribute indicates how the item is to be addedto the folder. For example, if locally stored content is to be added(e.g., saved) to the folder, then the add-to-folder type attribute couldbe set to “upload” (e.g., a descriptor stored as a string), indicatingthat the item will be added to the folder via upload (e.g., from theclient). In another example, if remotely stored content such as awebsite is to be added to the folder, the, the add-to-folder typeattribute could be set to “link,” since a website link would besufficient to identify the website to be added to the source folder. Insuch a case, the server may then request the relevant item for localstorage using the link.

The upload file attribute includes one or both of a filename and acontent type. For example, if the item to be added to the source folderis a PDF, then the content type could be “PDF” and the filename can bethe name of the PDF file.

In an embodiment where the item to be added to the folder is a websiteor other remotely stored content that can be accessed using a webaddress, a URL is included as an attribute. The URL attribute indicatesa location where the remotely stored item can be located. In someembodiments, the URL can comprise an IP address, a web address, or othertype of resource locator.

A title assignment attribute can also be associated with the item. Thetitle assignment attribute can be a TRUE/FALSE indicator to indicatewhether the server or the user will determine the title attribute forthe item. For example, if the title assignment attribute is set to TRUE(or 1 or “Yes” or another binary indicator), then the server canautomatically extract a title from the corresponding item (e.g., thetitle of a website, PDF document, etc.) and set that title as the titleattribute for the item. If the title assignment attribute is set toFALSE (or 0 or “No” or another binary indicator), then a title providedby the user will be set as the title attribute for the correspondingitem. In embodiments, a user can input a title for an item at the timethe item is saved to a source folder, or at some later point in time.

An annotation assignment attribute operates similarly to the titleassignment attribute. If the annotation assignment attribute is set toTRUE, then the server can automatically extract an annotation (e.g.,snippet, summary, or metadata associated with the item) and set thatannotation as the annotation attribute for the item. Otherwise, if theannotation assignment attribute it is set to FALSE, then an annotationprovided by the user will be set as the annotation attribute for thecorresponding item. In embodiments, a user can input an annotation foran item at the time the item is saved to a source folder, or at somelater point in time.

An image assignment attribute is another indicator attribute. If theimage assignment attribute is set to TRUE, then the server canautomatically extract a representative image (e.g., an image containedwithin the item) and set that image as the image attribute for the item.Otherwise, if the image assignment attribute is set to FALSE, then arepresentative image selected by the user will be set as the imageattribute for the corresponding item. For example, if the item to beadded to the source folder is a website having an image associated withit (e.g., a Wikipedia entry having a featured image), then the servercan automatically extract that image and set it as the image attribute.Alternatively, the user can select some other representative image to beset as the image attribute. In embodiments, a user can select an imagefor an item at the time the item is saved to a source folder, or at somelater point in time.

A save method attribute indicates how an item is to be saved to thesource folder. For example, if an item is locally stored, then the savemethod attribute can indicate that the save method is “upload.” Inembodiments where, for example, the item to be saved to the sourcefolder is remotely stored and can be accessed via URL, then the savemethod attribute can indicate that the save method is “url_only.”

A save-to-folder identifier can identify, for example, the source folderor a non-permanent folder in which an item (or items, if there are morethan one) is temporarily stored before adding it to the source folder.In some embodiments, the save-to-folder identifier is associated with arequest to add an item to a source folder such that, for example, aserver can distinguish between multiple requests from different clients.In some embodiments, the save-to-folder identifier is a UniversallyUnique Identifier (UUID), and in other embodiments, the save-to-folderidentifier is unique within the server, but not universally unique. Insome embodiments, the save-to-folder identifier can be used by theserver in the process of generating a source folder (e.g., the sourcefolder does not exist until the request is received and processed by theserver), and once the source folder is generated, the save-to-folderidentifier can become the source folder identifier, or, in someembodiments, the source folder can be given a new source folderidentifier.

Finally, a browser attribute can be included to identify the web browserwith which the client sent the request to the server (e.g., Firefox,Chrome, Safari, etc.).

The server, after receiving the request to add an item to the sourcefolder, then saves the item to the source folder, and responds to therequest as shown in step 702. Saving an item to a source folder caninclude, for example, storing an item to a server in such a way that theitem can be accessed via the source folder. This can be accomplished ina variety of ways depending on how the server (or other computingdevice) is configured (e.g., it can depend on the file structure). Theresponse includes one, or any combination of, the following: acompletion status indicator; a created-at indicator; adata-storage-usage indicator; a description; image attributes; a name; atitle; a source folder identifier; and item attributes corresponding tothe item.

A completion status indicator informs the client as to whetheractivities related to the client's request are completed. In someembodiments, the server's response to the client's request to add anitem to the source folder can be sent to the client before all of theserver's activities related to saving the item are completed.

A created-at indicator includes information about when the item wascreated on the server (e.g., when the item was saved to the sourcefolder and recorded in the server as being present in the sourcefolder). In some embodiments, the created-at indicator includes a timeand date.

A data-storage-usage indicator can indicate, for example, the amount ofmemory or storage being used by the item on the server when it is storedin the source folder. This value can be useful to facilitateoptimization during website generation. For example, if thedata-storage-usage indicator indicates that the item is relatively large(e.g., the item, when included in a generated website, would consumemore data than necessary to send to clients on mobile plans with limiteddata plans), then the item can be optimized during (or before) thewebsite generation step. In some embodiments, optimization can includecompressing images into different formats, optimizing documents (e.g.,PDFs) to occupy less space, and the like.

A description can include a brief description of the item. Thedescription can be pulled from the content of the item itself (e.g.,from the contents of a document or website), or it can be pulled fromthe item's metadata (e.g., a description that exists in a PDF'smetadata).

Image attributes can include information sufficient to describe severalaspects of an image associated with an item. For example, the imageattributes can include an array of information about an image includinga full URL pointing to the original image or to an optimized version ofthe image, dimensions of the image, a tint, a dominant color of theimage, moment data for the image, a URL pointing to a thumbnail of theimage, and dimensions of the thumbnail of the image.

A title attribute can include, for example, the title or name of theitem. In embodiments where the item is remotely stored (like a website),the title attribute can include information pulled from the website(e.g., a byline, a header, an article title, etc.). In embodiments wherethe item is locally stored, the title attribute can include the name ofthe file that is uploaded, or it can include a name stored in the file'smetadata.

A title can be a title associated with an item. Thus, a title caninclude a title that is associated with an uploaded item or a title thatis associated with a remotely stored item, based on either the contentof the item or the item's metadata (e.g., a document title, an articletitle, etc.).

A source folder identifier identifies the source folder to which an itemor items have been added. A source folder identifier can be a UUID, orit can be unique only at the service-level (e.g., an identifier that isunique to the server, but not universally unique). In some embodiments,the source folder identifier can be a token that is assigned to thesource folder by, for example, the server.

In some embodiments, a client can request to add a plurality of items(of the same or different types) to a source folder at the same time(e.g., the request can relate to a website and an uploaded PDF), or aclient can make multiple requests (each request to add one or more itemsto a source folder) before the server responds. Each item in therequest(s) has corresponding item attributes, and the item attributesare returned to the client in the server's response to the client'srequest(s) to add one or more items to a source folder. The itemattributes for each item can include one, or any combination of: a MIMEattribute; an item type (e.g., upload, link); and a URL.

MIME stands for Multipurpose Internet Mail Extensions. A MIME attributeincludes a type and a subtype, which are two strings, separated by a‘/’. No space is allowed. The type represents the category and can be adiscrete or a multipart type. The subtype is specific to each type. MIMEtypes include for example: text, image, audio, video, and application.MIME subtypes include, for example: (for text) plain, HTML, JavaScript,and CSS; (for image) gif, png, jpeg, bmp, and webp; (for audio) midi,mpeg, webm, ogg, and way; (for video) webm and ogg; (for application)octet-stream, pkcs12, vnd.mspowerpoint, xhtml+xml, xml, and pdf.

An item type attribute can be used to identify an item type for the itemin the request to add an item to the source folder. For example, an itemtype attribute can be “upload” for when the item is locally storedcontent (e.g., content that has to be uploaded to the server such as adocument, a video, or an audio file), a “note” for when an item is auser-defined note (e.g., a grocery list), or a “link” for when the itemis remotely stored content that is accessible via a link.

A URL can be included in the server's response. In embodiments where theitem is locally-stored content, the URL can direct a web browser to alocation on the server (e.g., on the same domain as the server, or on asub-domain of the server that directs clients to the server) where theitem, or some portion of the item, can be accessed (e.g., a URL of alocation where the item was uploaded onto the server). In embodimentswhere the item is remotely stored, the URL can direct a web browser to alocation on an external server where the item (or some portion of theitem) can be accessed. A URL can point to a wide variety of content,including webpages, YouTube videos, images, documents, videos, and audiofiles.

With the preceding steps completed, the server can add an item to anidentified source folder. With one or more items added to a sourcefolder, a user can then request the server to create a website usingthose items, as shown in step 704. Thus, in step 704, the client sendsto the server a website creation request. The website creation requestincludes one or more of the following attributes: the source folderidentifier, the name, a subtitle, a description, an image URL, and atheme.

The source folder identifier is included in the website creation requestto help the server to know which source folder to draw from to createthe website. Thus, any item or items that have been added to the sourcefolder can be used to create the website subject to the request.

The name included in the website creation request can be, for example,the source folder name. It is also contemplated that the name can be aname for the website that is being requested (e.g., a user-definedname). Other possible name attribute properties are described above.

A subtitle, like other descriptive attributes, can include informationthat is taken from one or more of the items contained in the sourcefolder, or it can be taken from the source folder itself (e.g., fromsource folder metadata). In some embodiments, the subtitle attribute canbe user-defined.

A description, like other descriptive attributes, can includeinformation that is taken from one or more of the items contained in thesource folder (e.g., it can be algorithmically generated based on thecontents of the items in the source folder), or it can be taken from thesource folder itself (e.g., from source folder metadata). In someembodiments, the description attribute can be user-defined.

An image URL attribute includes a URL that points to an image that isstored either on the server or on a remote server, where the image thatthe URL points to is relevant to the website that is subject to theclient's request. The image URL attribute allows the client's websitecreation request to include a preferred image that can be used on thewebsite as, for example, a featured image (e.g., on a banner, a header,etc.).

A theme attribute can also be included in the client's request togenerate a website. A theme attribute includes a website theme accordingto which the generated website must be created. A theme can defineformatting, styling, colors, fonts, layout, etc. for a website, andinclusion of a theme attribute allows for a user to make a themeselection so that the client's request can include that theme selectionin the theme attribute. A theme can also define a general structure fora website. For example, a theme might define whether a website is aflat, scrollable single page of content or a series of interlinkedpages. In some embodiments, the theme can be user-selected, but in theabsence of a user selection, a default theme can instead be implementedand sent in the request. In some embodiments, if no theme attribute isincluded in the request, then the server uses a default theme.

In some embodiments, methods of the inventive subject matter canevaluate a variety of different aspects of items when determining atheme to represents those items. In these embodiments, item type or evenaspects of various item representatives such as resolution, length oftext, content of text, etc. can be taken into consideration whenselecting a theme. For example, if a majority of items that are to beused in generating a website are images, then a theme that betterrepresents images can be used. If titles and descriptions of items arelong, then a theme can be selected that is better at representingtext-heavy content (e.g., a theme where fonts are more legible and lessstylized).

In some embodiments, some of the items to be used to generate a websiteare web pages. The domains from which those items originate can beevaluated and considered when determining an appropriate theme. Forexample, if the web pages to be included in a generated websitepredominantly originate from fashion websites, then a fashion-centeredtheme can be implemented for the generated website. If, on the otherhand, the web pages to be included are predominantly news web pages,then a theme that is more appropriate for text-based information can beimplemented for the generated website.

Next, the server generates a website in response to the client'srequest, as shown in step 706. The website that is generated, which canbe accessed using a website URL (or other type of resource locator thatfacilitates access to the website over a network connection), comprisesall items that have been added to the source folder.

Once the website has been generated, the server sends, to the client, aresponse to the website creation request, as shown in step 708. In someembodiments, actual website generation may alternatively occur when thewebsite is requested by the user via http, https, or other websiteprotocol. The response to the website creation request includes one, orany combination of the following: author attributes; an authoridentifier; an analytics ID; a created-at attribute; a data storageusage attribute; a description; a website image; a website name; thesource folder identifier; total data storage usage; the website URL; anda visual completion status.

Author attributes can include an author name and an author avatar. Insome embodiments, the author is the user that caused the client to senda website creation request to the server. Thus, the author name can bethat user's name or username. The author avatar can be a user-definedimage that is associated with the user or with the client. In someembodiments, the author and author avatar can both be user-defined.

An author identifier is used to identify the author of the website. Insome embodiments, the author identifier is a token. The authoridentifier can be a UUID, or it can be an identifier that is uniquewithin the server without being universally unique. The purpose of theauthor identifier is to allow the server to distinguish between authorsof different websites that are generated in response to differentwebsite generation requests from different clients (i.e., requests fromdifferent authors).

An analytics ID can be included in some embodiments. The analytics IDcan be, for example, an identifier that is specific to a websiteanalytics aggregator (e.g., a Google Analytics ID). It can be useful inallowing an author (i.e., a user) to track data related to the generatedwebsite.

A created-at attribute includes one or both of a time and date at whichthe website was generated. It can additionally or alternatively includea date and time at which the response to the website generation requestis sent to the client.

A data storage usage attribute includes information about the size ofthe generated website, which can be measured in bytes (e.g., kilo-,mega-, giga-). This information can be useful for optimization. Forexample, when a generated website exceeds a certain space threshold, theclient can initiate a request to optimize the images on the generatedwebsite by changing the format or resolution of each image. This isimportant to reduce website loading times, which can often driveimpatient users away from a website they are otherwise interested invisiting.

A description attribute is described above in more detail. In theresponse to the website generation request, the description attributecan include a description of the generated website, for example. In someembodiments, a description of a source folder can be the same as adescription of a website that is generated using that source folder.

A website image attribute can include a featured image for the website.In some embodiments, the website image attribute can include informationsufficient to describe several aspects of an image associated with thewebsite. For example, the image attributes can include an array ofinformation about an image including a full URL pointing to the originalimage or to an optimized version of the image, dimensions of the image,a URL pointing to a thumbnail of the image, and dimensions of thethumbnail of the image. In embodiments, a website image attribute canalso include a focal point. The focal point defines the central point ofinterest for an image. When a focal point is defined, and the featuredimage is larger than the user's viewport (e.g., the user may be viewingthe website on a mobile device), embodiments will avoid cropping thefocal point out of the image.

A source folder identifier can also be included in the response. Thesource folder identifier identifies the source folder from which thewebsite was created. It can be a UUID or an identifier that is uniquewithin the server without being universally unique.

The response to the website creation request includes the website URL.The website URL can be used by, for example, a web browser to access thewebsite that the server generated according to the client's request togenerate a website from a source folder. The website URL can be used todirectly access the generated website, or it can cause one or morere-directs resulting in accessing the generated website. Re-directs toaccess a generated website can be useful for website analytics includingtracking where traffic to the generated website originates.

A visual completion status can also be included in the response to thewebsite generation request. A visual completion status can indicate to aclient whether the generated website's visual features have beencompleted. In some embodiments, a website's visual features arecompleted when all of the images on the website are optimized. Optimizedimages can be stored on the server that handles website generation or onanother server for easy access by the generated website.

In some embodiments, the step of receiving a request to add an item to asource folder can comprise information sufficient to add multiple itemsto the source folder at the same time. For example, a user on a clientcomputer could select some combination of either remotely stored items,locally stored items, or both, and information sufficient to identifyand add those items to a source folder could be transmitted in therequest according to the description above.

It is also contemplated that the step of receiving a request to add anitem to a source folder can be carried out multiple times (e.g., insequence or in parallel), where each request corresponds to a differentitem that a user on a client computer would like added to a sourcefolder. The step of sending a response to the request to add an item toa source folder can be carried out once in response to multiplerequests, or the server can generate a unique response to each request(e.g., each request corresponds to a single item and has a uniquecorresponding response).

The end result is that a source folder can hold any number of items, andwhen the server receives a request to generate a website, the servergenerates the website using all of the contents of the source folder. Insome embodiments, a request to generate a website can also includeinstructions to include only a subset of items in the source folder.

In some embodiments, multiple source folders can be used to create awebsite. When multiple source folders are used in the course ofgenerating a website, the server may use each source folder to create adifferent section on the website. For example, if a first source folderincludes items related to chickens (e.g., articles, research papers,pictures) and a second source folder includes items related to eggs(e.g., articles, research papers, pictures), then the resulting websitethat the server generates using the first and second source folderswould include two sections: a chicken section and an egg section. In thesame or alternative embodiments, the server could generate a websitewhere all the content from each source folder is combined into a singlesection of the website.

To create a website using multiple source folders, it is contemplatedthat the request to generate a website can identify multiple sourcefolders by including multiple source folder identifiers. Then, when theserver generates the website, it has sufficient information from therequest to incorporate the contents of multiple source folders, and itcan then incorporate sections into the website where each source foldercorresponds to a section on the website.

In some embodiments, a source folder can additionally or alternativelyinclude any number of subfolders. For example, a “chicken” source foldercan include “domesticated chickens” and “chicken history” subfolders,where each subfolder can contain items. In these embodiments, the sourcefolder itself can include one or more items as well as one or moresubfolders. In embodiments where a source folder includes one or moresubfolders, the request to generate a website includes, at a minimum, asource folder identifier for the main source folder that contains one ormore subfolders. By identifying the source folder, the server can getinformation about all of the contents of the source folder, includinginformation about items and subfolders contained in the source folder.It is also contemplated that the request to generate a website caninclude one or more source folder identifiers, where each source folderidentifier corresponds to a source folder or subfolder (which can beconsidered a type of source folder).

As described above with relation to generating a website using multiplesource folders, when a source folder includes subfolders, thosesubfolders can each be used by the server to create subsections on thegenerated website. For example, a main source folder can be a mainsection, and each subfolder within that source folder can be asubsection to the source folder's main section. This form of hierarchycan be repeated for any number of source folders and subfolders. It iscontemplated that subfolders can themselves contain subfolders, and soon.

During the step of generating a website, the server can undertakeseveral steps to create item representatives from the items in the oneor more source folders used to create the website. For each item, theserver can either create or identify one or more item representativesthat can be used in the website. An item representative can be (orinclude), for example, an image, title, subtitle, and descriptionpertaining to an item. In some embodiments, an item representative canalso be (or include) a name and a title, as described above. In thisway, one item can have one or more item representatives associated withit.

In some embodiments, the server can create the item representatives fromthe items in a source folder at the time the client sends a websitecreation request. In other embodiments, the server can create the itemrepresentatives at the time the items are added to the source folder,and then the server can use those item representatives when generating awebsite. In this case, the server can use the item representatives inboth the source folder and the corresponding website.

In other embodiments, the server can create a shell of a website (i.e.,a website that does not include any items) at the time the client sendsa website creation request. Then, the server can dynamically create theitem representatives at the time that a web browser requests thatwebsite from the server and fit the item representatives into the shell.

Item representatives can then be used by the server in the process ofgenerating a website. For example, websites are generated, at least inpart, according to a layout, where the layout includes guidelines aboutwhere item representatives (e.g., one or more parts of an itemrepresentative) for each item should be placed on the website, as wellas how those item representatives should be styled (e.g., fonts, imagecropping, location, orientation, border, and any other style informationthat can be applied using, for example, a CSS sheet). A layout can beincluded with a user-selected theme, or, if no user-selected theme isdefined, a default layout (or, in some embodiments, a set of defaultlayouts) is used.

With item representatives created for each item, generating a websitethen becomes a matter of fitting item representatives into correspondingplaces on the website according to the layout (e.g., placing an itemdescription in an item description slot and fitting a corresponding itemimage in an item image slot that is positioned above the itemdescription according to the layout).

Multiple layouts can also be used in the generation of a single website.For example, if a website includes multiple sections (e.g., a website isgenerated using items from multiple source folders, where each sourcefolder is used for a different section of a generated website), theneach section of the website can be generated according to a differentlayout. It is similarly contemplated that a single layout can be usedfor multiple sections of a generated website, causing each section tohave a similar look and feel. As mentioned above, one or more layoutscan be included in a theme.

Layouts facilitate visually pleasing presentations of itemrepresentatives by, for example helping to avoid undesirable imageclipping and text truncation/clipping. Layouts also help to achievevariation and variety in the generated website's appearance. To furtherimprove variety, embodiments may use one of several default layouts whena user does not define a layout (e.g., either by selecting a layout orby selecting a theme having one or more layouts). Layouts can help avoiddedicating a large space on a website for a low-resolution image thatwould not look good in that large space. Layouts can help to eliminatevisual gaps on a generated website. Layouts can also be used todetermine which item representatives would be appropriate for differentareas of the website. For example, a layout can include a requirementthat a text description item representative should be placed only if thetext description includes fewer than 140 characters. In another example,a layout can require an image item representative to have a resolutionthat exceeds a certain threshold before it will display that image itemrepresentative in an image space on a generated website.

In some embodiments, layouts can include item slots that can be assessedand changed depending on the needs of the layout. Layouts that can bringabout item slot changes to, for example, improve the visual appeal of awebsite or to eliminate gaps in a website's item slot arrangement can bereferred to as auto-layouts. For example, if a layout includes a defaultitem slot that accommodates both an item description and an accompanyingitem image, but an available item image has a resolution that is too lowfor the item slot's default configuration, then an auto-layout can causethe item slot to deviate from the default by, for example, changing theitem slot to include a smaller image portion and to include a largertext description portion in response to the changed item image portionof the slot. Thus, an auto-layout of the inventive subject matter can,among other things, allow item slot configurations to depend on the itemrepresentatives to be shown in the item slots.

As mentioned above, a layout capable of adjusting item slots (e.g.,changing size, shape, configuration, dimensions, etc.) is referred to asan “auto-layout.” An auto-layout is thus not necessarily constrained toa particular layout and can automatically adjust to accommodatedifferent item representatives corresponding to items in a sourcefolder. In the course of determining how an auto-layout needs to adjustto accommodate different item representatives, it is convenient toconsider the subject matter that can be presented by a layout. Layoutscan include both sections and item slots, where a section can containother sections as well as item slots. Each section can itself include animage, a title, a description, or any combination thereof.

As discussed above, item slots can accommodate a wide variety ofdifferent item types (and item representatives created thereof),including links, notes, and uploads. Links can include web links,streaming video links (e.g., YouTube links), image links, documentlinks, video links, and audio links. Uploads can include uploadedimages, uploaded documents, uploaded video, and uploaded audio. Eachitem slot in a layout can include a representative image, a title, asubtitle, a description, etc. Additional information can also beincluded in the item slot, depending on the type of informationcontained in the corresponding item. For example, if the item includesvideo of any kind, then the item slot can include space for an itemrepresentative that includes a preview of the video (e.g., a loopingportion of the video, a still from the video, or a still image that,upon hovering the mouse over it, shows segments of the video playing,etc.).

When a website is generated according to systems and methods of theinventive subject matter, an auto-layout (e.g., the server implementingan auto-layout) can determine whether each section within the layoutshould be formatted according to one of a plurality of section-levelformats. For example, embodiments can include a “gallery” section and a“normal” or default section. Gallery sections present item slots thatprimarily feature images (e.g., thumbnails), as shown in FIG. 1. In someembodiments, a gallery section can include a title, a description, andone or more images (e.g., where the images are item representatives).

Auto-layouts can present images in a variety of ways. Images can be usedas cover images (e.g., where the image covers an entire space of asection). In some embodiments, an image used as a cover image can becropped or resized to better fit the area allocated for the cover image.Images can be placed into a container (e.g., an item slot), where theimage can be shown uncropped but in a contained area and not shown fullyedge to edge within that container. Images can also be presented asstamps, where a stamp is similar to an image container except that thestamp image is smaller (e.g., a thumbnail) than an ordinary container.In some embodiments, no image is used at all (e.g., other itemrepresentatives such as a description and title can be used without anassociated image). FIG. 2 demonstrates how each image style can bedisplayed to a user on a website generated according to the inventivesubject matter.

When a website is generated, the auto-layout is used to make a varietyof determinations. It is used to determine several image options (e.g.,whether the image should be shown, and, if it should be shown, whetherit should be shown as a part of a cover, a container, or a stamp).Moreover, the auto-layout must also determine a configuration for eachitem slot within a layout, e.g., it must determine item slot sizes andwhether each item slot should be split between, for example, an imageand text, and how an image within an item slot should be presented(e.g., an image can be presented in any of the ways described above andshown in FIG. 2). FIG. 3 shows schematic representations of a variety ofdifferent items slots that can include one or any combination of animage, text, a title, and a description.

In some embodiments, a layout (auto- or otherwise) can dictate that agenerated website includes one or more columns for item slots. When awebsite includes two columns, for example, the item slots making up thetwo columns can be rearranged depending on screen size and resolution sothat the content presented on the website can be dynamically changed tofit into a single column instead of two. This can be useful to ensureeasy viewing when the website is accessed from devices with smallscreens (e.g., cell phones) and also from devices with larger screens(e.g., computers and laptops).

Item slots within layouts can be arranged in a variety of ways,including: single column width by single row height (“single”); doublecolumn width (“double wide”); double row height (“double high”); anddouble column width and double row height (“two by two”). For example,in a single item slot, the item slot can accommodate a variety ofdifferent item representatives including text overlaid on an image, textthat is arranged side-by-side with an image, and text below an imagewithin the single column width by single row height item slot. Doublewide item slots can accommodate, for example, text overlaid on an imagethat spans the entire double wide item slot or an image with associatedtext beside it. A double high item slot can accommodate, for example,text overlaid on an image or text that is above or below an associatedimage. Two by two item slots can accommodate larger images, more text,or a combination of both with the option of including any other type ofitem representation.

When a layout includes double wide item slots, it is possible a gap canemerge in the layout. A gap, in this context, can appear when, forexample, two double wide item slots 402, 404 (regardless of item height)appear above and below a one-column-wide item slot 406 (regardless ofitem slot height), as shown in FIG. 4, thus leaving a gap next to theone-column-wide item slot.

Gaps can also emerge when an item slot is placed next to another itemslot where one of those two items slots has a different height than theother. For example, as shown in FIG. 5, when a double high item slot 502is placed adjacent to a single item slot 504, the single item slot 504slot ends up having a gap below it. The gap can similarly appear aboveitem slot 504 or it can appear as two gaps both above and below itemslot 504, depending on the alignment of the slots relative to eachother. In general, gaps can occur whenever two or more item slots havingdifferent dimensions are placed adjacent to each other.

An auto-layout of the inventive subject matter strives to achieveseveral goals. Auto-layouts can determine item slot dimensions and whichitem representatives should be placed within those item slots so as toimprove information presentation. Auto-layouts help reduce, for example,image cropping and truncation of an item title or item description. Forexample, an item title can sometimes be truncated when it includes toomuch text in relation to the amount of space available in an item slot.An auto-layout can determine that an item having a longer associatedtitle can be placed into either a double wide or double high item slotso there is more space for item representatives, including the longertitle.

In another example, when an item slot has an aspect ratio thatnecessitates undesirable image cropping that can remove portions of animage that should not be removed (e.g., an image that has two people init and one person is completely cropped out to accommodate an aspectratio that is different from the image's natural aspect ratio), theauto-layout can change the item slot's dimensions to better accommodatethe image. For example, tall item slots (e.g., item slots where theheight is greater than the width) can lend themselves better toaccommodating portrait-orientated images, whereas wide item slots (e.g.,item slots having a greater width than height) can lend themselves tolandscape-oriented images. In embodiments where an item slot is split(e.g., an item slot has an image item representative in one portion anda text item representative in another portion of the slot), the splitbetween different item representatives in an item slot may be horizontalor vertical (e.g., depending on whether the item slot is wider than itis tall, or vice versa). It is also contemplated that the split can bediagonal, or the item slot can be split by a non-linear divider. An itemslot's split can affect how item representatives within the item slotare cropped or truncated.

Auto-layouts can also help to bring about variation and variety in itemslot choices. When the same item slots are repeated over and over again,a generated website can look dull. Accordingly, an auto-layout canrandomly select different item slot sizes and configurations to helpgive a generated website the appearance of being human-made. In someembodiments, auto-layouts can also help to avoid allotting a large itemslot or portion of an item slot for an image item representative if thatimage item representative includes an image that has too low of aresolution to look good within the allotted item slot. This helps avoidincluding low-quality images within layouts to give a generated websitea more professional look.

In some embodiments, auto-layouts can also help reduce gaps by selectingitem slot sizes that fit together without creating gaps. In someembodiments, the item slots selected for use within an auto-layout canbe selected based on the content that needs to be included within thoseitem slots. For example, images and videos can look better in item slotswhere the image or video can span the entire width of an item slot. Whenan item is a document, it can look better in an item slot where an imageis separated from text (e.g., an item slot where there is a divisionbetween an image item representative and a text item representative). Insome embodiments, an image associated with a document can itself be animage of a page in the document instead of an actual image from document(especially in cases where a document does not include any images). Inthese embodiments, having a text-based item representative overlaid onan image item representative from the document can make the text-baseditem representative impossible to read (e.g., because it would be laidover other text).

Webpages of the inventive subject matter are generated according to oneor more layouts in phases. A layout, or auto-layout, can be usedrecursively during generation of each section of a generated website. Insome embodiments, sections are considered independently of each other,while in other embodiments, sections can be interrelated such thatrelationships between sections can be taken into consideration duringwebsite generation.

For a given section to be generated in the course of generating awebsite, an auto-layout determines the different sizes andconfigurations of the item slots within the section. In someembodiments, the auto-layout can determine whether a section needs toshow more than a cutoff number of items (e.g., more than five, more than10, or more than 15). If items to be included within a section includemedia item types (e.g., audio, video, images, etc.), then theauto-layout can make the section into a gallery section. For example, anauto-layout creates a section as a gallery-type section when greaterthan some threshold quantity of image-type item representatives are tobe fit into that section's item slots. In some embodiments, anauto-layout can set the section type to be gallery when the sectionincludes >25%, >50%, or >75% image items. If the number of image itemsis less than a threshold amount, the section can be created normally.

In some embodiments, sections can be hybrid sections that include normalitem slots and also gallery item slots. The gallery item slots can begrouped together. These embodiments do not require an all-or-nothingapproach to section type determination, and thus it doesn't matter howmany images there are in a given section—gallery item slots can beincluded in sufficient numbers to accommodate however many images existwithin a section.

An auto-layout also determines what type of item slots can be usedwithin a particular section. It selects the proper item slots for eachitem, e.g., it selects item slots having appropriate widths and heightsas well as internal item slot configuration (see, e.g., FIG. 3) for theitem representatives that are to fit into each slot, depending onattributes of the item representatives for each item. For example, if awebsite item is included that has an image item representative orientedas a landscape, then an auto-layout can assign that item to a doublewide item slot so that the image can span the entire item slot.

An auto-layout can determine the best, or at least an acceptable, itemslot size and configuration (i.e., the item slot type) according to ascoring algorithm. Particularly, for each item representative, theauto-layout can assign a numerical score to each possible item slottype. Item slot types with higher scores are selected over item slottypes with lower scores for a particular item representative. Any or allof the attributes discussed herein, including item type, imageresolution, title length, description length, etc. can increase ordecrease the score of an item slot type based on its compatibility withan item representative. When two item slot types have the same score, anauto-layout can select one at random or one that has not been usedrecently to improve the variety of item slot types.

Item slot scores can be improved depending on an item slot'scompatibility with one or both of an item's title length and descriptionlength. For example, items with short length titles and/or descriptionscan be better suited for a single item slot with an image to a side ofthe title. Items with long length titles and/or descriptions, on theother hand, can be better suited for tall item slots (e.g., an item slotwith greater height than width such as a double high item slot). Itemswith normal length titles and/or descriptions can be suited for all itemslots except, for example, single and double item slots withedge-to-edge images and single item slots with an image on a side. Itemtitle lengths can be evaluated according to standardized characterlengths, e.g., a short title has at most 75 characters, a normal titlecan have from 75-115 characters, and a long title can have from 115-175characters. Description title lengths can be evaluated similarly usingcorresponding ranges of characters.

Depending on item type, additional adjustments to item slot scores canalso be made. For example, when an item is an image or a video, anauto-layout can ensure that the only item slots considered for thoseitem types are configured to accommodate edge-to-edge image or video. Ininstances where an item is a document or note, on the other hand, anauto-layout can ensure that the only item slots for those item types areconfigured to include a split between an image and text.

In some embodiments, an item slot's score can be adjusted according tothe nature of an image that is associated with an item. For example, ifan image associated with an item is a screenshot of a web page or of theitem itself (or believed to be a screenshot based on, e.g., a namingconvention of the image file), the auto-layout can determine not to usean edge-to-edge item slot for that image. Often, edge-to-edgescreenshots of a web page or an item can include text (e.g., when anitem is a document or note, the only image for that item would be ascreenshot of the document or note that includes text) and having anitem's title or description overlaid on top of a screenshot of thattext-laden item can result in text being overlaid onto text, making itdifficult or impossible to read. In some embodiments, text can bedetected in an item's image using, for example, OCR software, and whentext is detected, an auto-layout can then determine that the affecteditem should not be placed into an item slot featuring an image overlaidwith text.

In some embodiments, item slot scores can be affected by an aspect ratioor size of an item's image or video, or both. For example, an itemslot's score can be improved when it's size or dimensions (or both)better match those of an item's image or video. Likewise, an item slot'sscore can be diminished when its size or dimensions (or both) do notmatch those of an item's image or video. For example, when an itemrepresentative (e.g., an item video or image) is approximately square,then the auto-layout can determine that an item slot should have asimilar aspect ratio (e.g., the same number of columns and rows). Whenan item is a note or document, then the auto-layout can favor, forexample, a single item slot, a double wide item slot where an item imageis to a side of the slot, or a double high item slot with an image onthe top or the bottom of the slot.

When an item to be included in an item slot is a web link, theauto-layout can give better scores to single item slots that accommodatean edge-to-edge image on a side of the slot, or an item slot that istaller than it is wide and having an image on the top or bottom.

In instances where an item image is around twice as wide as it is talland also has sufficiently high resolution (where sufficiency ofresolution can depend on a variety of factors including item slot sizeand resolution and size of a screen that it is to be presented on), avariety of item slots can be evaluated. For example, item slots that areconfigured to accommodate videos or images in an edge-to-edge manner,item slots for documents or notes that are wide with an image on a side,and item slots for web links that are wide with an edge-to-edge imagecan be considered baselines for scoring.

Item slots that are twice as wide as they are tall (e.g., double wideitem slots) can receive better scores for images that are wider thanthey are tall (e.g., approximately twice as wide as tall). In instanceswhere the image has a low resolution (e.g., a resolution where theimage's low quality would be apparent when rendered on a website), then,for example, a single item slot with an image on top or bottom, a wideitem slot (e.g., a double wide item slot) having an overlaid image, or awide item slot with an image on a side can be given better scores thanother item slots.

When an item image is elongated even more than a 2:1 ratio of width toheight, then single item slots with the image on top can be scoredbetter than other item slots. If an elongated image has a lowresolution, then the score for an item slot that is wide with an imageon a side can be reduced to make it less likely an auto-layout willselect that item slot.

When an image is oriented as a portrait (e.g., taller than wide), thensimilar determinations are made as with elongated images, except that anauto-layout will favor single item slots with an image on a side, itemslots that are taller than they are wide that accommodate anedge-to-edge image, or item slots that are wider than tall andaccommodate an image on a side.

In some embodiments, in the course of selecting item slots, repetitionof similar item slots can be avoided. For example, if an auto-layoutevaluates an item slot for item n in a preliminary layout, theauto-layout will consider the configuration of item slots that havealready been selected for items n-1 and n-2. If the same configurationof the item slot being considered for item n has already been selectedfor items n-1 or n-2, then an auto-layout can instead determine whetherthere exists an equal or comparable item slot (e.g., an item slot thatscores equally or comparably to the item slot being considered for itemn) that can be selected instead.

In some embodiments, auto-layout item slot selection, as mentionedabove, can additionally consider image resolution of all images in asection. The auto-layout can then favor larger item slots (e.g., two bytwo item slots, double wide item slots, or double high item slots) foritems having images with the highest resolutions (e.g., the top 5-20% ofimages) among the images in the section.

Once an item slot is selected, the auto-layout can set image options.For example, if an item image has a low resolution, then a stamp can beused. If an item is a document, then an image of the document (e.g., ascreenshot of a page of the document) can be placed into a container topreserve aspect ratio, etc. If an item image is a screenshot, then theimage can be put into a container for the same reasons a document'simage would be placed into a container. In some embodiments, an imagecan be set as a cover image (e.g., with or without overlaid text), sothat the image covers the full area allocated for the image, though theimage may be cropped as a result.

As mentioned above, an auto-layout can also be responsible for fillinggaps that are created when different sized item slots are placedadjacent to each other. In some embodiments, a preliminary layout ofitem slots is created. Adjacent combinations of item slots are evaluatedto determine where gaps exist, and then the auto-layout determines howto fill those gaps by, for example, reorganizing or changing thedimensions of existing item slots. In some embodiments, item slot sizesand locations are determined before the website is generated so that bythe time the website is generated, all item slots can fit together withminimal gaps (or, ideally, no gaps). In this sense, a preliminary layoutcan be created, and combinations of item slots are evaluated for gapsbefore modifying some of the item slots to eliminate those gaps. Thisprocess can be repeated until all gaps are eliminated, until anyremaining gaps cannot be eliminated, or for some set maximum number ofiterations (e.g., 5, 10, etc.)

In other embodiments, item slots are evaluated and modifiedsequentially, e.g., as each new item slot is considered and placed intoan auto-layout, the auto-layout determines whether the item slot needsto be modified based on the other items slots that have already beenplaced. Decisions for gap elimination can thus be localized by sectionwithout necessitating a global view of an entire generated website.Thus, item slots can be evaluated either based on a preliminaryarrangement of item slots, and, in some embodiments, the preliminaryarrangement of item slots includes all possible item slots inpreliminary positions before evaluation, while in other embodiments, apreliminary arrangement of item slots is generated one item slot at atime as each subsequent item slot is evaluated and put into position inthe preliminary arrangement.

If a particular arrangement of item slots is found to result in a gap,then an auto-layout must determine how to eliminate the gap. Forexample, as shown in FIG. 6, a gap exists because there is a double highitem slot 602 adjacent to a single item slot 604. That gap can then beeliminated by, for example, changing the double high item slot 602 to bea single item slot, or by changing the single item slot 604 to a doublehigh item slot.

In the example shown in FIG. 5, a gap exists because a double high itemslot 502 is placed above a double wide item slot 506 with a single itemslot 504 adjacent to the double high item slot 502. An auto-layout coulddetect this gap and then eliminate it by changing the double wide itemslot 506 to a double high item slot, or by changing the double high itemslot 502 and the single item slot into 504 double wide item slots. Inthe example shown in FIG. 6, a double high item slot 602 is to the leftof a single item slot 604, and a second double high item slot 606 isbelow that single item slot 604 resulting in a gap below the firstdouble high item slot 602. To eliminate this gap, a variety of changescan be made to the item slots. The single item slot 604 can be made intoa double high item slot and the second double high item slot 606 can bemade wide, the first double high item slot 602 can be made a single itemslot and the second double high item slot 606 can be made a double wideitem slot, the single item slot 604 can be made a double wide item slotand moved below the two double high item slots 602, 606, etc. Changes toitem slots can be made based on evaluations of different item slots asdescribed above.

An auto-layout thus first identifies a gap and the arrangement of itemslots that gave rise to the gap's existence. Next, it determines a bestway to eliminate the gap. The “best way” to eliminate a gap takesseveral factors into consideration, including a frequency with whichsame-sized item slots are used in a section. For example, if too manyitem slots having the same size are used consecutively, then an itemslot having that same size will be disfavored by the auto-layout for gapelimination. If a particular size of item slot is disfavored orotherwise cannot be used, then the remaining possible item slots areevaluated as discussed above. For example, if two possible item slotchanges that can fill a gap are “make the item slot wide” or “make theitem slot tall,” then the double high item slot change can be selectedif the item includes a lot of text because double high item slots arebetter suited for more text.

Similarly, if a choice exists between taking a double high item slot andmaking it a single or a double wide item slot, then that item's imageaspect ratio can be taken into consideration. For a landscape itemimage, for example, it can be better to change a double high item slotto a double wide item slot. It can also be desirable for an auto-layoutto avoid side-by-side double high item slots (e.g., either where bothdouble high item slots have similar internal arrangements of itemrepresentations or where the only similarity is that both item slots arein tall configurations). For example, when two double high item slotsinclude edge-to-edge images or both have an image on top, it can reducevisual appeal. Thus, when an auto-layout considers how to eliminate agap, it can evaluate aspect ratios of item images that will go into bothitem slots and take that into consideration so as to avoid item slotarrangements that are not visually appealing.

An auto-layout can also eliminate gaps by rearranging item slots(including corresponding items). For example, if a first row of apreliminary layout includes a double row height item slot next to asingle row height item slot, and a second row below includes a singlerow height item slot next to a double row height item slot, theauto-layout can eliminate the gaps by swapping one of the single rowheight item slots with one of the double row height item slots.

Gap elimination, as discussed above, can be added into any system ormethod of the inventive subject matter disclosed in this application,including those shown in FIGS. 7A-9B. FIGS. 10A & 10B demonstrate anexample of a method that incorporates gap elimination, where FIG. 10Adescribes the steps, and FIG. 10B demonstrates information flow for eachstep. In step 1000, the server receives a website creation request froma client, and the website creation request includes a source folderidentifier. The source folder identifier, as discussed above in moredetail, indicates which source folder to use in the course of creating awebsite. The source folder identifier can be an array of identifiersindicating several source folders so that a website having differentsections can be generated.

In step 1002, the server generates at least one item representative foreach item in the source folder. Again, this step is described above inmore detail. Any method of the inventive subject matter that includesthese steps can additionally include all of the following steps that aredirected to gap elimination. In step 1004, the server determines,according to an auto-layout, a preliminary arrangement of item slots forthe website. A preliminary arrangement refers to an item slotarrangement before any gaps have been eliminated.

In step 1006, the server determines whether any gaps exist in thepreliminary arrangement. If any gaps exist, then at least one of thosegaps is eliminated according to step 1008. Gap elimination can occur inany manner described in this application. Further, gap elimination canbe undertaken recursively to minimize a number of gaps, thus steps 1006and 1008 can be repeated after each time one or more gaps is eliminatedfrom a layout.

Finally, in step 1010 the server generates the website and a websiteURL, and in step 1012 the server sends a website creation response tothe client where the response includes the website URL that gives a useraccess to the website.

In embodiments, the server can generate a static website written in amarkup language like HTML. In these embodiments, markup language labelsin a corresponding document directly define the presentation of thewebsite, including the size and positioning of the items, metadata, andsections. A web browser can then render the website as specified in themarkup language document. In embodiments, the server can generate aprogrammatic website written in a scripting language like JavaScript. Inthese embodiments, one or more scripts can instruct the web browser tofetch the components of the website (i.e., the items, metadata,sections, etc.) and to render them in a particular way. A programmaticwebsite can include myriad features such as responsive design, whichformats the website for particular browsers, displays, and devices. Aprogrammatic website, for example, can also permit users tointeractively edit the website, including the items, metadata, andsections, within the website. In embodiments, the server can generate awebsite that includes both static and programmatic components. Inembodiments, the terms “generate” and “regenerate” can refer to thecreation of one or more website files (e.g., HTML files) that reside ondisk, in memory, or in a database, and are later rendered by a webbrowser. In the same or alternative embodiments, these terms can referto the creation of one or more objects in memory, in a database, or ondisk that can later be retrieved and rendered by a web browser whileexecuting scripting instructions.

In embodiments, the server can regenerate a website based on changes tothe contents of the associated source folder (and any subfolders). Forexample, if a user adds new items to a source folder after the serverhas already generated a website, the server may regenerate the websiteto include the new items. Similarly, the server may regenerate thewebsite if one or more existing items within the source folder havechanged. For example, if a user changes the representative image or thetitle for an item, or deletes the item, the server may regenerate thewebsite to reflect the changes. In embodiments, the client notifies theserver when items are added to or changed within a source folder (andany subfolders), and the server automatically regenerates the website.Alternatively, the server may not regenerate the website until receivingan explicit instruction from the user to do so.

An embodiment of the inventive subject matter that incorporates some ofthe concepts above are shown in FIGS. 8A and 8B. The embodiment shown inthese figures incorporates many of the same steps as described abovewith respect to FIGS. 7A and 7B. Once a server receives theuser-selected items as described in step 800, the server then adds thoseuser-selected items to a source folder, as shown in step 802. As shownin step 804, the server receives a request from the client to create awebsite using the source folder and its contents. And as shown in step806, the server generates item representatives for each of theuser-selected items. An item representative includes, for example, adescription of the item, a name of the item, a size of the item, animage related to the item, etc. These attributes are discussed above inmore detail. It is contemplated that steps 806 and 804 can be completedin any order. Next, in response to the client's request to generate awebsite, the server generates a website using the item representativesit created for each item in the source folder, where the generatedwebsite can be accessed via URL, as shown in step 808. Finally, theserver sends the generated website's URL to the client so the client (orany other computing device) can access the website via the URL, as shownin step 810.

In another embodiment shown in FIGS. 9A and 9B, a method of generating awebsite incorporates folders and subfolders to create a website havingdifferent sections (and, in some embodiments, subsections). First, aserver receives a set of user-selected items from a client, as shown instep 900. The items from the set of user-selected items received fromthe client can then be added, by the server, to one or more subfolderswithin a source folder, as shown in step 902. For example, if the set ofuser-selected items includes two items, then a first item can be addedto a first subfolder and a second item can be added to a secondsubfolder. As described above the first and second subfolder can existwithin the source folder, or multiple source folders can exist, eachsource folder containing one or more items.

In another step, the server receives a request from the client togenerate a website, as shown in step 904. The request, which isanalogous to the request described above with respect to FIGS. 7A and8B, can include additional information sufficient to identify what itemsto generate the website with, such as a source folder identifier. Inanother step, the server generates item representatives for each item inthe set of user-selected items, as shown in step 906. This step canoccur at any time after the server has been given the items by the userand before it uses the items to create a website. Item representativesare described above in more detail.

Finally, the server generates a website using the item representativesthat the server generated based on the items in the source folder andits subfolders. The generated website includes up to as many sections asthere are subfolders within the source folder, as shown in step 908.

Thus, specific systems and methods of generating websites have beendisclosed. It should be apparent, however, to those skilled in the artthat many more modifications besides those already described arepossible without departing from the inventive concepts in thisapplication. The inventive subject matter, therefore, is not to berestricted except in the spirit of the disclosure. Moreover, ininterpreting the disclosure all terms should be interpreted in thebroadest possible manner consistent with the context. In particular theterms “comprises” and “comprising” should be interpreted as referring tothe elements, components, or steps in a non-exclusive manner, indicatingthat the referenced elements, components, or steps can be present, orutilized, or combined with other elements, components, or steps that arenot expressly referenced.

What is claimed is:
 1. A method of generating a website, the methodcomprising the steps of: receiving, by a server from a client, a websitecreation request, the website creation request comprising a sourcefolder identifier, wherein the source folder identifier corresponds to asource folder comprising items to be included in the website;generating, by the server, an item representative for each item in thesource folder; determining, by the server, a preliminary arrangement ofitem slots for the website, wherein each item slot is associated withone or more item representatives, and wherein each item slot is selectedfrom a plurality of item slot types based at least in part on one ormore attributes of the associated one or more item representatives;determining, by the server, whether one or more gaps exist in thepreliminary arrangement of item slots, and eliminating at least one gapby altering at least one of the position or item slot type of at leastone item slot; generating, by the server, the website and a website URL,wherein the website comprises each of the item representatives in acorresponding item slot, and the website is accessible by the websiteURL; and sending, by the server to the client, the website URL.
 2. Themethod of claim 1, wherein each of the items to be included in thewebsite is one of: an upload; a web link; or a note.
 3. The method ofclaim 1, wherein each of the item representatives comprises at least oneof: an image; a title; a subtitle; and a description.
 4. The method ofclaim 1, wherein the plurality of item slot types comprises at least twoof: single with text overlaid on image; single with image and text splithorizontally; single with image and text split vertically; wide withtext overlaid on image; wide with image and text split vertically; tallwith text overlaid on image; tall with image and text splithorizontally; and tall and wide with text overlaid on image.
 5. Themethod of claim 1, wherein the one or more attributes include: itemtype; image resolution; image dimensions; title length; descriptionlength; and video aspect ratio.
 6. The method of claim 5, wherein theserver selects an item slot type for each item slot by evaluating one ormore of the attributes against the plurality of item slot types andassigning a score to each item slot type, and wherein the server selectsthe item slot type with the highest score.
 7. The method of claim 1,wherein a first item in the source folder is in a first subfolder of thesource folder, and wherein a second item in the source folder is in asecond subfolder of the source folder.
 8. The method of claim 7, whereinthe website includes a first section comprising a first itemrepresentative associated with the first item and a second sectioncomprising a second item representative associated with the second item.9. The method of claim 8, wherein the first section is a normal sectionand the second section is a gallery section.
 10. The method of claim 1,wherein the server determines whether one or more gaps exist in thepreliminary arrangement of item slots by evaluating adjacentcombinations of item slots.
 11. The method of claim 10, wherein alteringthe item slot type of at least one item slot comprises selecting adifferent item slot type that is compatible with the associated one ormore item representatives but still eliminates the gap.
 12. The methodof claim 1, further comprising the steps of: receiving, by the serverfrom a client, a first request to add, delete, or change an item withinthe source folder; and regenerating, by the server, the website based onthe added, deleted, or changed item within the source folder.
 13. Themethod of claim 12, wherein the server automatically regenerates thewebsite in response to the first request.
 14. The method of claim 12,wherein the server regenerates the website in response to a secondrequest from the client after the first request.
 15. The method of claim1, wherein the website is a programmatic website written in a scriptinglanguage.
 16. A method of generating a website, the method comprisingthe steps of: receiving, by a server from a client, a set ofuser-selected items, the set of user-selected items comprising at leasta first web link and a second web link; adding, by the server, the setof user-selected items to a source folder that is associated with asource folder identifier; receiving, by a server from a client, awebsite creation request, the website creation request comprising thesource folder identifier; generating, by the server, an itemrepresentative for each of the user-selected items in the source folder,each item representative comprising at least one of a text block and animage; determining, by the server, a preliminary arrangement of itemslots for the website, wherein each item slot is associated with one ormore item representatives, and wherein each item slot is selected from aplurality of item slot types based at least in part on one or moreattributes of the associated one or more item representatives;determining, by the server, whether one or more gaps exist in thepreliminary arrangement of item slots, and eliminating at least one gapby altering at least one of the position or item slot type of at leastone item slot; generating, by the server, the website and a website URL,wherein the website comprises each of the item representatives in acorresponding item slot, and the website is accessible by the websiteURL; and sending, by the server to the client, the website URL.
 17. Themethod of claim 16, wherein the plurality of item slot types comprisesat least two of: single with text overlaid on image; single with imageand text split horizontally; single with image and text splitvertically; wide with text overlaid on image; wide with image and textsplit vertically; tall with text overlaid on image; tall with image andtext split horizontally; and tall and wide with text overlaid on image.18. The method of claim 16, wherein the one or more attributes include:item type; image resolution; image dimensions; title length; descriptionlength; and video aspect ratio.
 19. The method of claim 16, wherein thefirst web link in the source folder is in a first subfolder of thesource folder, and wherein the second web link in the source folder isin a second subfolder of the source folder; and wherein the websiteincludes a first section comprising an item representative associatedwith the first web link and a second section comprising an itemrepresentative associated with the second web link.
 20. The method ofclaim 16, further comprising the steps of: receiving, by the server froma client, a first request to add, delete, or change an item within thesource folder; and regenerating, by the server, the website based on theadded, deleted, or changed item within the source folder.